<template>
  <boss-view>
    <div slot="content" class="financeData">
      <div class="top">
        <!-- 盈利能力 -->
        <view-item>
          <div slot="mainData" class="mainData">
            <div class="left">
              <i class="bossVersion">&#xe605;</i>
              <p class="title">盈利能力</p>
            </div>
            <div class="right">
              <!-- 利润总额 -->
              <div class="top">
                <p class="title">利润总额</p>
                <div class="num">
                  <i-count-up
                    :startVal="startVal"
                    :endVal="totalData.totalProfit"
                    :decimals="decimals"
                    :duration="duration"
                    :options="options"
                  />
                  <i class="units">万元</i>
                </div>
              </div>
              <div class="bot">
                <!-- 总资产收益率 -->
                <div class="ratio">
                  <p class="title">总资产
                    <br>收益率
                  </p>
                  <div class="num">
                    <i-count-up
                      :startVal="startVal"
                      :endVal="totalData.allCapitalEarningsRate"
                      :decimals="decimals"
                      :duration="duration"
                      :options="options"
                    />
                    <i class="units">%</i>
                  </div>
                </div>
                <!-- 毛利率 -->
                <div class="ratio">
                  <p class="title">毛利率</p>
                  <div class="num">
                    <i-count-up
                      :startVal="startVal"
                      :endVal="totalData.grossInterestRate"
                      :decimals="decimals"
                      :duration="duration"
                      :options="options"
                    />
                    <i class="units">%</i>
                  </div>
                </div>
                <!-- 净利率 -->
                <div class="ratio">
                  <p class="title">净利率</p>
                  <div class="num">
                    <i-count-up
                      :startVal="startVal"
                      :endVal="totalData.netInterestRate"
                      :decimals="decimals"
                      :duration="duration"
                      :options="options"
                    />
                    <i class="units">%</i>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </view-item>

        <!-- 运营能力 -->
        <view-item>
          <div slot="mainData" class="mainData">
            <div class="left">
              <i class="bossVersion">&#xe604;</i>
              <p class="title">运营能力</p>
            </div>
            <div class="right">
              <!-- 资产总额 -->
              <div class="top">
                <p class="title">资产总额</p>
                <div class="num">
                  <i-count-up
                    :startVal="startVal"
                    :endVal="totalData.totalAssets"
                    :decimals="decimals"
                    :duration="duration"
                    :options="options"
                  />
                  <i class="units">万元</i>
                </div>
              </div>
              <div class="bot">
                <!-- 总资产周转率 -->
                <div class="ratio">
                  <p class="title">总资产
                    <br>周转率
                  </p>
                  <div class="num">
                    <i-count-up
                      :startVal="startVal"
                      :endVal="totalData.totalAssetsTurnoverRate"
                      :decimals="decimals"
                      :duration="duration"
                      :options="options"
                    />
                    <i class="units">%</i>
                  </div>
                </div>
                <!-- 应收账款周转率 -->
                <div class="ratio">
                  <p class="title">应收账款
                    <br>周转率
                  </p>
                  <div class="num">
                    <i-count-up
                      :startVal="startVal"
                      :endVal="totalData.accountsReceivableTurnoverRate"
                      :decimals="decimals"
                      :duration="duration"
                      :options="options"
                    />
                    <i class="units">%</i>
                  </div>
                </div>
                <!-- 存货周转率 -->
                <div class="ratio">
                  <p class="title">存货周转率</p>
                  <div class="num">
                    <i-count-up
                      :startVal="startVal"
                      :endVal="totalData.inventoryTurnoverRate"
                      :decimals="decimals"
                      :duration="duration"
                      :options="options"
                    />
                    <i class="units">%</i>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </view-item>

        <!-- 偿债能力 -->
        <view-item>
          <div slot="mainData" class="mainData">
            <div class="left">
              <i class="bossVersion">&#xe602;</i>
              <p class="title">偿债能力</p>
            </div>
            <div class="right">
              <!-- 资产负债率 -->
              <div class="top">
                <p class="title">资产负债率</p>
                <div class="num">
                  <i-count-up
                    :startVal="startVal"
                    :endVal="totalData.assetLiabilityRate"
                    :decimals="decimals"
                    :duration="duration"
                    :options="options"
                  />
                  <i class="units">%</i>
                </div>
              </div>
              <div class="bot">
                <!-- 流动比率 -->
                <div class="ratio">
                  <p class="title">流动比率</p>
                  <div class="num">
                    <i-count-up
                      :startVal="startVal"
                      :endVal="totalData.flowRate"
                      :decimals="decimals"
                      :duration="duration"
                      :options="options"
                    />
                    <i class="units">%</i>
                  </div>
                </div>
                <!-- 速动比率 -->
                <div class="ratio">
                  <p class="title">速动比率</p>
                  <div class="num">
                    <i-count-up
                      :startVal="startVal"
                      :endVal="totalData.speedRate"
                      :decimals="decimals"
                      :duration="duration"
                      :options="options"
                    />
                    <i class="units">%</i>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </view-item>

        <!-- 增长能力 -->
        <view-item>
          <div slot="mainData" class="mainData">
            <div class="left">
              <i class="bossVersion">&#xe603;</i>
              <p class="title">增长能力</p>
            </div>
            <div class="right">
              <!-- 营业收入 -->
              <div class="top">
                <p class="title">营业收入</p>
                <div class="num">
                  <i-count-up
                    :startVal="startVal"
                    :endVal="totalData.businessIncome"
                    :decimals="decimals"
                    :duration="duration"
                    :options="options"
                  />
                  <i class="units">万元</i>
                </div>
              </div>
              <div class="bot">
                <!-- 营业收入增长率 -->
                <div class="ratio">
                  <p class="title">营业收入
                    <br>增长率
                  </p>
                  <div class="num">
                    <i-count-up
                      :startVal="startVal"
                      :endVal="totalData.businessIncomeRate"
                      :decimals="decimals"
                      :duration="duration"
                      :options="options"
                    />
                    <i class="units">%</i>
                  </div>
                </div>
                <!-- 净利润增长率 -->
                <div class="ratio">
                  <p class="title">净利润
                    <br>增长率
                  </p>
                  <div class="num">
                    <i-count-up
                      :startVal="startVal"
                      :endVal="totalData.netProfitGrowthRate"
                      :decimals="decimals"
                      :duration="duration"
                      :options="options"
                    />
                    <i class="units">%</i>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </view-item>
      </div>

      <div class="cen">
        <view-inside-item>
          <div slot="insideData" class="insideData">
            <!-- 营业收入预算及实际对比 -->
            <div class="insideChart">
              <main-title>
                <span slot="txt" class="txt">营业收入预算及实际对比</span>
              </main-title>
              <div class="chartTips">单位:万元</div>
              <new-bar-charts
                slot="main"
                v-model="takingArr"
                :option="takingOption"
                :chartStyle="'min-height:258px;'"
              ></new-bar-charts>
            </div>
            <em></em>
            <!-- 考核利润预算及实际对比 -->
            <div class="insideChart">
              <main-title>
                <span slot="txt" class="txt">考核利润预算及实际对比</span>
              </main-title>
              <div class="chartTips">单位:万元</div>
              <new-bar-charts
                slot="main"
                v-model="assessmentOfProfitsArr"
                :option="assessmentOfProfitsOption"
                :chartStyle="'min-height:258px;'"
              ></new-bar-charts>
            </div>
          </div>
        </view-inside-item>
      </div>

      <div class="bot">
        <!-- 预期回款 -->
        <view-chart-item>
          <div slot="chartData" class="chartData">
            <main-title>
              <span slot="txt" class="txt">预期回款</span>
            </main-title>
            <div class="chartTips">单位:万元</div>
            <bar-chart
              v-model="receivablesArr"
              :option="receivablesOption"
              :chartStyle="'min-height:258px;'"
            ></bar-chart>
          </div>
        </view-chart-item>
        <!-- 期间费用 -->
        <view-chart-item>
          <div slot="chartData" class="chartData">
            <main-title>
              <span slot="txt" class="txt">期间费用</span>
            </main-title>
            <div class="chartTips">单位:万元</div>
            <pie-chart v-model="useArr" :option="seniorityOption" :chartStyle="'min-height:258px;'"></pie-chart>
          </div>
        </view-chart-item>
        <!-- 税费 -->
        <view-chart-item>
          <div slot="chartData" class="chartData">
            <main-title>
              <span slot="txt" class="txt">税费</span>
            </main-title>
            <div class="chartTips">单位:万元</div>
            <pie-chart v-model="taxArr" :option="seniorityOption" :chartStyle="'min-height:258px;'"></pie-chart>
          </div>
        </view-chart-item>
      </div>
    </div>
  </boss-view>
</template>

<script>
import ICountUp from "vue-countup-v2";
import viewItem from "@/components/bossVersion/viewItem";
import viewChartItem from "@/components/bossVersion/viewChartItem";
import viewInsideItem from "@/components/bossVersion/viewInsideItem";
import newBarCharts from "@/components/Charts/newBarCharts";
import barCharts from "@/components/Charts/barCharts";
import barChart from "@/components/Charts/barChart";
import pieChart from "@/components/Charts/pieChart";
import mainTitle from "@/components/bossVersion/mainTitle";
import bossView from "@/components/bossVersion/bossView";
import {
  GetFinanceProfitDistributionForTrendChartForBoss,
  GetFinancialSituationForPlate
} from "@/api/finance/index";
export default {
  components: {
    pieChart,
    newBarCharts,
    barChart,
    barCharts,
    ICountUp,
    viewItem,
    viewChartItem,
    viewInsideItem,
    mainTitle,
    bossView
  },
  data() {
    return {
      // 数字
      startVal: 0,
      decimals: 0,
      totaDecimals: 2,
      duration: 2.5,
      options: {
        useEasing: true,
        useGrouping: true,
        separator: ",",
        decimal: ".",
        prefix: "",
        suffix: ""
      },
      totalData: {
        totalProfit: 0,
        allCapitalEarningsRate: 0,
        grossInterestRate: 0,
        netInterestRate: 0,
        totalAssets: 0,
        totalAssetsTurnoverRate: 0,
        accountsReceivableTurnoverRate: 0,
        inventoryTurnoverRate: 0,
        assetLiabilityRate: 0,
        flowRate: 0,
        speedRate: 0,
        businessIncome: 0,
        businessIncomeRate: 0,
        netProfitGrowthRate: 0,
        targetList: [
          {
            code: 0,
            codeName: "string",
            list: [
              {
                name: "string",
                value: 0,
                percent: "string"
              }
            ]
          }
        ]
      }, // 总数据
      useArr: [], // 使用
      taxArr: [], // 税费
      takingArr: [], // 营业收入
      assessmentOfProfitsArr: [], // 考核利润
      receivablesArr: [], // 应收账款
      seniorityOption: {
        color: ["#28e787", "#f0bd26", "#48e5ff", "#FF7145", "#ff3e9a"],
        radius: ["65%", "80%"],
        center: ["50%", "50%"],
        // roseType: "radius",
        startAngle: 250,
        formatter: function(value) {
          return "{value|" + value.name + "}";
        },
        hidePieMargin: true,
        showLine: true,
        showLabel: true,
        legend: {
          show: false
        }
      },
      receivablesOption: {
        // 应收账款 chart option
        barWidth: 50,
        grid: {
          left: "5%",
          top: 60,
          height: 160
        },
        xAxis: {
          axisLabel: {
            rotate: 0
          }
        },
        // showUnit: true,
        unit: "%"
      },
      // 营业收入Chart option
      takingOption: {
        hidePieMargin: true,
        color: ["#f0bd26", "#28e787"],
        legend: {
          top: 10,
          right: "0%",
          data: [
            {
              icon: "rect"
            },
            {
              icon: "rect"
            }
          ]
        },
        grid: {
          top: 60,
          left: "5%",
          height: 160
        },
        xAxis: {
          axisLabel: {
            rotate: 0
          }
        },
        labelDefault: 1
        // startColor: ["#0071BC", "#29AAE1"],
        // endColor: ["#006837", "#22B473"]
      },
      // 考核利润 chart option
      assessmentOfProfitsOption: {
        hidePieMargin: true,
        color: ["#FF7145", "#48e5ff"],
        legend: {
          top: 10,
          right: "0%",
          data: [
            {
              icon: "rect"
            },
            {
              icon: "rect"
            }
          ]
        },
        grid: {
          top: 60,
          left: "5%",
          height: 160
        },
        xAxis: {
          axisLabel: {
            rotate: 0
          }
        },
        labelDefault: 1
        // startColor: ["#0071BC", "#29AAE1"],
        // endColor: ["#006837", "#22B473"]
      }
    };
  },
  mounted() {
    this.fetchBarChartsData(); // 查询barcharts数据
    this.fetchTotalData(); // 总数据
  },
  methods: {
    async fetchTotalData() {
      const p = {
        plateId: "9006"
      };
      try {
        var res = await GetFinancialSituationForPlate(p);
        if (res.data.code === "0") {
          this.$set(this, "totalData", res.data.result);
          res.data.result.targetList.forEach(element => {
            switch (element.code) {
              case 31006:
                this.$set(this, "useArr", element.list);
                break;
              case 31013:
                this.$set(this, "taxArr", element.list);
                break;
              case 31014:
                this.$set(this, "receivablesArr", element.list);
                break;
              default:
                break;
            }
          });
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 获取营业收入数据、考核利润数据
    async fetchBarChartsData() {
      const p = {
        plateId: "9006"
      };
      try {
        var res = await GetFinanceProfitDistributionForTrendChartForBoss(p);
        if (res.data.code === "0") {
          var result = res.data.result;
          var newListData = [];
          var newListData2 = [];
          var newObj = {};
          result.singleTargetList.forEach(element => {
            switch (element.code) {
              case 50001:
                element.list.forEach(item => {
                  newObj = {
                    name: this.$utils.formatterMonthFun(item.name),
                    list: [
                      {
                        name: element.codeName,
                        value: item.value
                      }
                    ]
                  };
                  newListData.push(newObj);
                });
                break;
              case 50002:
                element.list.forEach((item, index) => {
                  newObj = {
                    name: element.codeName,
                    value: item.value
                  };
                  newListData[index].list.push(newObj);
                });
                break;
              case 50007:
                element.list.forEach((item, index) => {
                  newObj = {
                    name: element.codeName,
                    value: item.value
                  };
                  newListData[index].list.push(newObj);
                });
                break;
              case 50008:
                element.list.forEach((item, index) => {
                  newObj = {
                    name: element.codeName,
                    value: item.value
                  };
                  newListData[index].list.push(newObj);
                });
                break;
              case 50004:
                element.list.forEach(item => {
                  newObj = {
                    name: this.$utils.formatterMonthFun(item.name),
                    list: [
                      {
                        name: element.codeName,
                        value: item.value
                      }
                    ]
                  };
                  newListData2.push(newObj);
                });
                break;
              case 50005:
                element.list.forEach((item, index) => {
                  newObj = {
                    name: element.codeName,
                    value: item.value
                  };
                  newListData2[index].list.push(newObj);
                });
                break;
              case 50009:
                element.list.forEach((item, index) => {
                  newObj = {
                    name: element.codeName,
                    value: item.value
                  };
                  newListData2[index].list.push(newObj);
                });
                break;
              case 500010:
                element.list.forEach((item, index) => {
                  newObj = {
                    name: element.codeName,
                    value: item.value
                  };
                  newListData2[index].list.push(newObj);
                });
                break;
              default:
                break;
            }
          });
          this.$set(this, "takingArr", newListData);
          this.$set(this, "assessmentOfProfitsArr", newListData2);
        }
      } catch (e) {
        console.log(e);
      }
    }
  }
};
</script>


<style lang="scss" scoped>
@import "../../../../styles/bossVersion/_basics";

.financeData {
  @include absoluteAllSides(94, 20, 20, 140, 1);
  & > .top {
    display: flex;
    .item {
      width: 425px;
      height: 270px;
      padding: 45px 22px;
      margin-right: 20px;
      line-height: 1;
      .mainData {
        @include flexYcen;
        & > .left {
          @include flexFdcXcenYcen;
          width: 122px;
          height: 180px;
          @include borderRight;
          & > .bossVersion {
            font-size: 33px;
          }
          & > .title {
            margin-top: 18px;
            @include bold(18px);
          }
        }
        & > .right {
          flex: 1;
          margin-left: 20px;
          & > .top {
            margin-bottom: 22px;
            & > .title {
              margin-bottom: 5px;
              font-size: 18px;
            }
            & > .num {
              @extend .flexYbase;
              & > span {
                @include din(46px);
                & > i {
                  font-size: 24px;
                }
              }
              & > .units {
                margin-left: 5px;
                font-size: 16px;
              }
            }
          }
          & > .bot {
            @include flexYend;
            & > .ratio {
              width: calc(100% / 3);
              & > .title {
                margin-bottom: 5px;
                font-size: 14px;
                line-height: 1.3;
              }
              & > .num {
                @extend .inlineFlexYbase;
                & > span {
                  @include din(28px);
                }
                & > .units {
                  @include din(18px);
                }
              }
            }
          }
        }
      }
    }
    & > .item:nth-of-type(1) {
      color: $color3;
    }
    & > .item:nth-of-type(2) {
      color: $color4;
    }
    & > .item:nth-of-type(3) {
      color: $color5;
      .mainData {
        @include flexYcen;
        & > .right {
          & > .top {
            & > .num {
              & > .units {
                @include din(24px);
              }
            }
          }
        }
      }
    }
    & > .item:nth-of-type(4) {
      margin-right: 0;
      color: $color1;
    }
  }

  & > .cen {
    margin: 20px 0;
    .insideItem {
      width: 100%;
      height: 328px;
      .insideData {
        display: flex;
        align-items: center;
        .insideChart {
          position: relative;
          z-index: 1;
          width: calc(100% / 2 - 30px);
          .chartTips {
            @include absoluteTLSide(36, 0, 1);
          }
          .chart {
            margin-top: 26px;
          }
        }
        em {
          width: 1px;
          height: 230px;
          margin: 0 30px;
          background-color: $color9;
        }
      }
    }
  }

  & > .bot {
    @include flexYcen;
    .chartItem {
      width: 573px;
      height: 328px;
      margin-right: 20px;
      .chartData {
        position: relative;
        z-index: 1;
        .chartTips {
          @include absoluteTLSide(40, 0, 1);
        }
        .chart {
          margin-top: 26px;
        }
      }
    }
    & > .chartItem:nth-last-of-type(1) {
      margin-right: 0;
    }
  }
}
</style>
